<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
  padding: 18px 22px 22px 22px;
  background-color: rgb(240, 242, 245);
  margin-bottom: 80px;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.form-operator-button {
  background-color: #fff;
  position: fixed;
  width: 100%;
  left: 0px;
  right: 0;
  bottom: 30px;
  height: 64px;
  line-height: 64px;
  text-align: right;
  box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, 0.05);
  z-index: 10;
}

.form-el-radion {
  line-height: 30px;
  padding: 5px 0px;
  width: 100%;
}

.hex-form-inf {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  cursor: pointer;
  margin-right: 40px;
  position: relative;
  min-height: 33px;
  margin-left: 60px;
  line-height: 33px;
}

.hex-form-inf-content {
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.hex-form-inf-icon {
  font-size: 20px;
  margin-top: 5px;
  position: absolute;
  right: 0px;
}

.el-card__header_task {
  padding: 18px 20px;
  border-bottom: 1px solid #f5f1eb;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: rgb(238, 241, 246);
  background: #eef1f6;
  font-size: 12px;
  font-weight: bold;
}

.hex-form-inf .hex-form-inf-content-show {
  padding: 0 4%;
  background-color: gainsboro;
  border-radius: 8px;
}
</style>
<template>
  <div>
    <!--工具栏-->
    <div class="head-container" style="margin-top: 5px">
      <crud-operation/>
    </div>
    <!--表格渲染-->
    <el-table border stripe ref="table" :data="crud.data" style="width: 100%;"
              @select="crud.selectChange" @select-all="crud.selectAllChange"
              @selection-change="crud.selectionChangeHandler"
              :header-cell-style="{background:'#eef1f6',color:'#606266'}">
      <el-table-column
        v-if="columns.visible('bizDate')"
        :show-overflow-tooltip="true"
        label="业务日期"
        prop="bizDate"
      >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.bizDate }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="columns.visible('agentCode')"
        :show-overflow-tooltip="true"
        label="执行节点编码"
        prop="agentCode"
      />
      <el-table-column
        v-if="columns.visible('jobCode')"
        :show-overflow-tooltip="true"
        label="作业编码"
        prop="jobCode"
      />
      <el-table-column
        v-if="columns.visible('taskCode')"
        :show-overflow-tooltip="true"
        label="任务编码"
        prop="taskCode"
      />
      <el-table-column
        v-if="columns.visible('taskName')"
        :show-overflow-tooltip="true"
        label="任务名称"
        prop="taskName"
      />
      <el-table-column
        v-if="columns.visible('shellPath')"
        :show-overflow-tooltip="true"
        label="脚本目录"
        prop="shellPath"
      />
      <el-table-column
        v-if="columns.visible('execStTs')"
        width="200"
        :show-overflow-tooltip="true"
        label="开始执行时间"
        prop="execStTs"
      >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.execStTs }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import CRUD, {presenter, header, form, crud} from '@crud/crud'
import crudOperation from "@crud/extend/components/CRUD.OnlyLookOperation"

const queryList = [
  {cloumValue: "jobCode", cloumName: "作业编码"},
  {cloumValue: "taskCode", cloumName: "任务编码"},
  {cloumValue: "taskName", cloumName: "任务名称"}
];

//默认去查询
const defaultCrud = CRUD({
  title: '正在执行队列', sort: 'sort,asc', url: 'api/queue/qryRunningQueue',
  queryList: queryList,
})
const defaultForm = {}

export default {
  name: 'running',
  components: {crudOperation},
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  dicts: ['task_status', 'task_track_type', 'agent_status'],
  props: {
    agentInfo: Object,
    default: null
  },
  data() {
    return {}
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.crud.query.agentCode = this.agentInfo.agentCode;
    },
  }
}
</script>
